<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <ToHeader @add="add" />

    <!-- 主体部分 -->
    <ToBody
      :list="dataList"
      @del="del"
      @changeStatus="changeStatus"
      @checkAll="checkAll"
    />

    <!-- 底部部分 -->
    <ToFooter
      :surplus="surplus"
      :isDoneAll="isDoneAll"
      :type="type"
      @clear="clear"
      v-show="list.length"
      @changeType="changeType"
    />
  </section>
</template>

<script>
import ToHeader from './components/ToHeader.vue'
import ToBody from './components/ToBody.vue'
import ToFooter from './components/ToFooter.vue'

export default {
  components: {
    ToHeader,
    ToBody,
    ToFooter,
  },
  // 定义数据
  data() {
    return {
      type: 'all',
      // 本地拿到的是一个字符串不能当对象使用，用JSON.parse进行转换 将字符串转为对象
      // 当本地没有存储的时候默认为null  null不能作为初始值 所以设置一个空数组
      list: JSON.parse(localStorage.getItem('todoList')) || [],
    }
  },
  // 方法
  methods: {
    //删除
    del(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id)
    },

    // 修改状态的时间
    changeStatus(id) {
      const res = this.list.find((item) => item.id === id)
      res.isDone = !res.isDone
    },

    //  添加
    add(value) {
      const obj = { id: +new Date(), name: value, isDone: false }

      this.list = [obj, ...this.list]
    },
    // 清除完成的
    clear() {
      this.list = this.list.filter((item) => !item.isDone)
    },
    changeType(type) {
      this.type = type
    },
    // 反选
    checkAll(value) {
      // console.log(value);
      this.list.forEach((item) => (item.isDone = value))
    },
  },

  // 计算属性
  computed: {
    surplus() {
      //未完成长度
      return this.list.filter((item) => !item.isDone).length
    },
    // 是否显示全部清除按钮
    isDoneAll() {
      return this.list.some((item) => item.isDone)
    },
    // 根据判断type来显示数据
    dataList() {
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter((item) => !item.isDone)
        case 'completed':
          return this.list.filter((item) => item.isDone)
        default:
          return this.list
      }
    },
  },

  // 监听事件
  watch: {
    // 监听要发生改变的数据，改变之后往本地存储
    list: {
      // list为复杂数据类型 需要开始深度监听
      deep: true,
      handler(newValue) {
        // 存本地仓库转JSON格式 本地存储默认存字符串用JSON.stringify将对象转为字符串
        localStorage.setItem('todoList', JSON.stringify(newValue))
      },
    },
  },
}
</script>

<style></style>
